<template>
  <el-dialog
    :model-value="appointmentVisibles"
    :title="appointmentTitles"
    width="70%"
    @close="handleClose"
  >
    <el-row class="header">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="accessories.name" label="配件名称" />
        <el-table-column prop="accCount" label="配件数量" />
        <el-table-column prop="accessories.price" label="配件单价" />
      </el-table>
    </el-row>
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref, onMounted, defineProps, watch } from 'vue'
import { list } from '../../../api/maintainAcc'

// const form = ref({
//   id: '',
//   maintainId: '',
//   accId: '',
//   accCount: ''
// })

const queryForm = ref({
  id: ''
})

const total = ref(0)
const tableData = ref([])

async function query() {
  const resp = await list(queryForm.value)
  tableData.value = resp.data.data.list
  total.value = resp.data.data.total
}

// vue组件加载完成执行
onMounted(() => {
  query()
})

const props = defineProps({
  // 标题
  appointmentTitles: {
    type: String,
    default: '',
    required: true
  },
  // 编辑行数据
  appointmentRowValues: {
    type: Object,
    default: () => {}
  }
})
// 监听props.dialogRowValue值改变
watch(
  () => props.appointmentRowValues,
  () => {
    queryForm.value = props.appointmentRowValues
    // console.log(queryForm.value.id)
  },
  { deep: true, immediate: true }
)

const emits = defineEmits(['update:modelValue', 'query'])

// 关闭
function handleClose() {
  emits('update:modelValue', false)
}

</script>

<style class="scss" scoped>
::v-deep .el-input__prefix-inner {
  align-items: center;
}
</style>
